<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <meta HTTP-EQUIV="expires" CONTENT="0">
    <title>博客管理</title>
    <link rel="stylesheet" href="../../css/element.css">
    <link rel="stylesheet" href="../../css/base.css">
</head>
<body>
<div id="wrapper" v-cloak>
    <div style="padding-bottom: 10px">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item @click.native="parent.changeIndex('index')">首页</el-breadcrumb-item>
                <el-breadcrumb-item>博客编辑</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div style="height: 1px; margin: 10px 0; background-color: white"></div>

    <el-form :model="entity">
        <el-form-item label="博客标题" label-width="100px">
            <el-input v-model="entity.title" autocomplete="off" style="width: 40%"></el-input>
        </el-form-item>
        <el-form-item label="博客摘要" label-width="100px">
            <el-input v-model="entity.description" type="textarea" autocomplete="off" style="width: 40%"></el-input>
        </el-form-item>
        <el-form-item label="选择标签" label-width="100px">
            <el-select clearable v-model="entity.tag" placeholder="请选择" style="width: 40%">
                <el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.name"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="推荐轮播" label-width="100px">
            <el-switch
                v-model="entity.carousel"
                active-text="是"
                inactive-text="否"
                active-value="是"
                inactive-value="否">
            </el-switch>
        </el-form-item>
        <el-form-item label="博客主图" label-width="100px">
            <el-upload action="http://localhost:8888/files/upload" :on-success="fileSuccessUpload" :file-list="fileList">
                <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
        </el-form-item>
        <el-form-item label="博客内容" label-width="100px">
            <textarea id="mytextarea" cols="30" rows="30"></textarea>
        </el-form-item>

    </el-form>
    <div style="padding: 10px">
        <el-button type="primary" @click="save">保 存</el-button>
        <el-button @click="history.back()">取 消</el-button>
    </div>
</div>

<script src="../../js/jquery.min.js"></script>
<script src="../../js/vue.min.js"></script>
<script src="../../js/element.js"></script>
<script src="../../js/tinymce/tinymce.min.js"></script>


<script>

    let urlBase = "/api/blog/";
    new Vue({
        el: "#wrapper",
        data: {
            options: [],
            fileList: [],
            user: {},
            tableData: [],
            pageNum: 1,
            pageSize: 10,
            total: 0,
            dialogFormVisible: false,
            entity: {},
            isCollapse: false,
            search: '',
        },
        mounted() {
            this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};

            tinymce.init({
                selector: '#mytextarea',
                language: 'zh_CN',
                plugins: ['quickbars', 'link', 'table', 'image'], //选择需加载的插件
            });

            let id = location.search.split("=")[1];
            if (id) {
                $.get("/api/blog/" + id).then(res => {
                    this.entity = res.data;
                    console.log(this.entity);
                    setTimeout(() => {
                        tinymce.activeEditor.setContent(res.data.content)
                    }, 500)
                })
            }
            $.get("/api/tag").then(res => {
                this.options = res.data;
            })
        },
        methods: {
            fileSuccessUpload(res) {
                this.entity.file = "http://localhost:8888/files/" + res.data;
                this.entity.img = "http://localhost:8888/files/" + res.data;
                console.log(res)
            },
            handleCollapse() {
                this.isCollapse = !this.isCollapse;
            },
            logout() {
                $.get("/api/user/logout");
                sessionStorage.removeItem("user");
                location.href = "/page/end/login.html";
            },
            loadTable() {
                $.get(urlBase + "/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&name=" + this.search).then(res => {
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                });
            },
            exp() {   // excel 导出
                window.open(urlBase + "/export");
            },
            handleSizeChange(pageSize) {
                this.pageSize = pageSize;
                this.loadTable();
            },
            handleCurrentChange(pageNum) {
                this.pageNum = pageNum;
                this.loadTable();
            },
            add() {
                this.entity = {};
                this.fileList = [];
                this.dialogFormVisible = true;
            },
            save() {
                this.entity.content = tinymce.activeEditor.getContent();
                let type = this.entity.id ? "PUT" : "POST";
                $.ajax({
                    url: urlBase,
                    type: type,
                    contentType: "application/json",
                    data: JSON.stringify(this.entity)
                }).then(res => {
                    if (res.code === '0') {
                        this.$message({
                            message: "保存成功",
                            type: "success"
                        });
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        })
                    }
                    location.href="blog.html"
                })
            },
            edit(obj) {
                this.entity = JSON.parse(JSON.stringify(obj));
                this.fileList = [];
                this.dialogFormVisible = true;
            },
            del(id) {
                $.ajax({
                    url: urlBase + id,
                    type: "delete"
                }).then(res => {
                    if (res.code === '0') {
                        this.$message({
                            message: "删除成功",
                            type: "success"
                        })
                        this.loadTable();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        })
                    }
                })
            }
        }
    })
</script>
</body>
</html>
